<template>
	<div class="container" ref="refContainer">
		<div class="doc-content">
			<div class="title">
				适配说明文档
			</div>
			<div class="example-title">关于页面适配</div>
			
			<div class="alert">
				<p class="alert">为了更方便用户做适配，Gabriel-UI提供了rem版本</p>
				<p class="alert">采用375px作为页面基准宽度</p>
				<p class="alert">采用1rem=10px作为基准单位</p>
			</div>	
			
			<div class="example-title">使用方式（全量引入）</div>
			<code-view>
				<template slot="code-js">{{ code03 }}</template>
			</code-view>
			<div class="example-title">使用方式（按需引入）</div>
			<code-view>
				<template slot="code-js">{{ code04 }}</template>
			</code-view>
			
			<br>
			<div class="info">
				<p class="info">rem.js文件是干啥的？</p>
				<p>Gabriel-UI提供的REM版本，其实就是将所有的px单位更换成了rem单位</p>
				<p>我把这个文件的内容贴出来，我想你大概花3分钟的时间就能读懂它</p>
				<code-view>
					<template slot="code-js">{{ code05 }}</template>
				</code-view>
			</div>
			<br>
			<br>
			<div class="alert">
				<p class="alert">如果你没看懂，那么没关系</p>
				<p>你只需要记住，接下来再你的页面里，<span class="success">1个rem单位代表10px</span></p>
				<br>
				<div class="info">
					<p>假设你的设计图是750px(2倍图)宽，一个按钮在设计图上的大小为 200 * 80 </p>
					<p>由于750是375的<span class="danger">2</span>倍，因此你需要给你的按钮设定 width=20rem/<span class="danger">2</span> , height=8rem/<span class="danger">2</span> </p>
					<p style="margin: 10px 0;">也就是说<span class="danger">width=10rem</span> , <span class="danger">height=4rem</span></p>
				</div>
				<br>
				<div class="info">
					<p>假设你的设计图是1125px(3倍图)宽，一个按钮在设计图上的大小为 210 * 60 </p>
					<p>由于1125是375的<span class="danger">3</span>倍，因此你需要给你的按钮设定 width=21rem/<span class="danger">3</span> , height=6rem/<span class="danger">3</span> </p>
					<p style="margin: 10px 0;">也就是说<span class="danger">width=7rem</span> , <span class="danger">height=3rem</span></p>
				</div>
			</div>
		</div>
		<div class="demo-view">
			<div ref="refCellPhone" class="cellphone">
				<center>
					<br><br><br><br><br><br><br><br><br><br>
					<img src="../assets/logo.png" width="20%">
					<p>
						<img src="../assets/logo-text.png" width="40%" >
					</p>
				</center>
			</div>
		</div>
	</div>
</template>

<script>
	import CodeView from '../components/CodeView.vue'
	export default {
		components: {
			CodeView
		},
		data() {
			return {
				code01: `npm install gabriel-ui --save`,
				code03: `import 'gabriel-ui/adaptive/rem.js'
import GabrielUI from 'gabriel-ui/adaptive'
Vue.use(GabrielUI)`,
				code04: `import 'gabriel-ui/adaptive/rem.js'
import Button from 'gabriel-ui/adaptive/button'
import Table from 'gabriel-ui/adaptive/table'
Vue.use(Button)
Vue.use(Table)`,
				code05: `(function(){
	let rem_config = {
		baseWidth: 750, //此处设定页面的基准大小（即设计图宽度）
		fontSize: 10 //此处设定基准页面下根字体大小（即1rem=?px)
	}

	if(!window) console.error('当前非浏览器环境！rem适配无法启动。')
	console.log('设计图基准页面宽度为', rem_config.baseWidth);
	console.log('设计图基准页面根字体大小为', rem_config.fontSize);

	function reset() {
		let _width = window.innerWidth;
		document.documentElement.style.fontSize = rem_config.fontSize * _width/rem_config.baseWidth + 'px';
		console.log('当前页面根字体大小为', document.documentElement.style.fontSize);
	}

	reset();

	window.addEventListener("resize", function(){
		reset();
	})
})()`
			}
		},
		mounted() {
			let ele = this.$refs.refCellPhone
			this.$refs.refContainer.addEventListener('scroll', (e)=> {
				ele.style.top = e.target.scrollTop + 'px';
			})
		}
	}
</script>

<style>
</style>
